<template>
  <view class="news-list bg-white px-5.25 pt-1 pb-3 box-border min-h-[100vh]">
    <template v-if="news.list.length">
      <view class="listfor" v-for="(item, index) in news.list" :key="index">
        <view class="boxt">
          <view class="box_l">事件内容：</view>
          <view class="box_r">{{ item.content }}</view>
        </view>
        <view class="boxt">
          <view class="box_l">图片：</view>
          <view class="box_r imgtu">
            <image
              v-for="(its, i) in item.imglist"
              :key="i"
              :src="its"
              mode="aspectFit"
              @click="funcyl(item.imglist, i)"
            ></image>
            <!-- class="w-[160rpx] h-[120rpx]" -->
            <!-- @click="funcyl('http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960')" -->
            <!-- @click="funcyl(item.fileList, i)" -->
          </view>
        </view>
        <view class="boxt">
          <view class="box_l">上传人员：</view>
          <view class="box_r"
            >{{ item.createBy }}&emsp;{{ item.phonenumber }}</view
          >
        </view>
        <view class="boxt">
          <view class="box_l">上传时间：</view>
          <view class="box_r">{{ item.uploadTime }}</view>
        </view>
        <!-- <view>事件内容：<text>{{ item.content }}</text></view>
      <view>图  片：</view> -->
        <!-- <view class="right flex justify-center items-center">
        <image
          class="w-[195rpx] h-[120rpx]"
          :src="newsImg"
          mode="aspectFit"
        ></image>
      </view> -->
        <!-- @click="scanNewsDetail(item)" -->
        <!-- <newsListItem
          :newsTitle="item.title"
          :newsTime="
            item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD') : ''
          "
          :newsImg="imgPrefix + item.imgUrl"
        ></newsListItem> -->
      </view>
    </template>
    <up-empty
      v-else
      mode="history"
      text="暂无数据"
      icon="http://cdn.uviewui.com/uview/empty/history.png"
    >
    </up-empty>
    <!-- <up-loadmore
      :status="status"
      loadmore-text="上拉加载更多"
      nomore-text="没有更多了"
    /> -->
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import newsListItem from "@/components/newsListItem/newsListItem.vue";
import { snapshotgetSnapshotPushVoPage } from "@/api/news/index";
import { imgPrefix } from "@/config/app";
import dayjs from "dayjs";

const uToastRef = <any>ref(null);
const data = reactive({
  news: {
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
    current: 0,
    list: <any>[],
    total: 0,
  },
});
const { news } = toRefs(data);
const status = ref("loadmore");

onLoad((options) => {
  // zsssp.vue
  if (options) {
    uni.setNavigationBarTitle({
      title: options.newsTitle,
    });
    // switch (options.newsTitle) {
    //   case "反诈宣传":
    //     news.value.current = 0;
    //     break;
    //   case "消防安全":
    //     news.value.current = 1;
    //     break;
    //   case "防范提示":
    //     news.value.current = 2;
    //     break;
    //   case "政策规定":
    //     news.value.current = 3;
    //     break;
    //   default:
    //     break;
    // }
    initNews();
  }
});
onReachBottom(() => {
  let allTotal =
    news.value.queryParams.pageNum * news.value.queryParams.pageSize;
  if (allTotal < news.value.total) {
    // status.value = "loading";
    news.value.queryParams.pageNum++;
    initNews();
  } else {
    // status.value = "nomore";
    uToastRef.value.show({
      type: "info",
      message: "暂无更多数据",
    });
    return;
  }
});
// 获取对应的新闻列表
const initNews = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  snapshotgetSnapshotPushVoPage(news.value.queryParams)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      data.records = data.records ?? [];
      let arr = data.records.map((item) => {
        let arr = item.imgUrl.split(",");
        item.imglist = arr.map((req) => {
          return imgPrefix + req;
        });
        return item;
      });
      // console.log(99)
      // console.log(arr)
      news.value.list = [...news.value.list, ...arr];
      // news.value.list = [...news.value.list, ...data.records];
      news.value.total = data.total;
      uni.stopPullDownRefresh();
    })
    .catch((err: any) => {
      news.value.list = [
        {
          content: "string",
          createBy: "string",
          id: 0,
          imgUrl: "string",
          phonenumber: "string",
          readStatus: 0,
          sid: 0,
          uploadTime: "2025-06-05T14:24:13.549Z",
        },
        {
          content: "string111",
          createBy: "string111",
          id: 0,
          imgUrl: "string111",
          phonenumber: "string111",
          readStatus: 0,
          sid: 0,
          uploadTime: "2025-06-05T14:24:13.549Z",
        },
      ];

      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 查看新闻详情
// const scanNewsDetail = (item: any) => {
//   uni.navigateTo({
//     url: `/subPages/crowd/news/detail?newsId=${item.id}&newsType=${news.value.current}`,
//   });
// };
const funcyl = (e, i) => {
  uni.previewImage({
    current: i, // 当前显示图片索引
    urls: e, // 图片列表
  });
};
// let funcyl = function (e, i) {
//   // console.log(props.info)
//   // let arr = e.map(e=>{
//   //   return e.url
//   // })
//   // console.log(arr)
//   uni.previewImage({
//     current: i, // 当前显示图片索引
//     urls: e, // 图片列表
//   });
// };
</script>

<style lang="scss" scoped>
.listfor {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #333;
  .boxt {
    margin-bottom: 16rpx;
    display: flex;
    .box_l {
      width: 25%;
      color: #999;
    }
    .box_r {
      width: 75%;
    }
    .imgtu {
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
      > image {
        margin-bottom: 12rpx;
        width: 30%;
        height: 120rpx;
        margin-right: 10rpx;
        /* margin-right: 10rpx; */
      }
    }
  }
}
</style>
